<template>
  <!-- 入库首页 -->
  <BaseHeader title="工兵第72旅机关信息资料室" />
  <div class="toptitlemain">
    <!-- 输入框，获取扫码数据 -->
    <div class="out-input">
      <span>点击扫码</span>
      <el-input  v-model="barCode" ref="barCodeInput" style="width: 40vw;" @focus="handleFocus" 
        @keyup.enter.native="handleEnter" placeholder="请扫描条形码" clearable />
    </div>
    <!-- table用于显示所有扫码书本 -->
    <div class="table-list" ref="tableL">
      <el-button type="primary" @click="inPack" @keyup.enter.native="() => { null }" class="in-pack">入库</el-button>
      <el-table :data="tables" stripe :height="tbHeight" class="my-custom-table">
        <el-table-column prop="code" label="条形码" />
        <el-table-column prop="bookName" label="书名" />
        <el-table-column prop="publishTime" label="出版日期" />
        <el-table-column prop="miji" label="密级" />
        <el-table-column prop="inCount" label="入库数量" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click.prevent="deleteRow(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <BaseFooter />
    <RuKuDialog :dialogFormVisible="showDialog" :rowInfo="tables" @closeForm="closeRuKu" @confirmRuKu="showOpenBox" />
    <OpenBox :optionName="'入库完成'" :isShow="showBox" :selectInfo="tables" @closeBox="closeBoxFinish" :boxList="boxArr" />
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import BaseHeader from '../BaseHeader.vue';
import BaseFooter from '../BaseFooter.vue';
import { ref, reactive, onMounted } from 'vue';
import RuKuDialog from './components/ruku/RuKuDialog.vue';
import OpenBox from './components/ruku/OpenBox.vue';
import { getBookInfoByCode } from '../../../api/index'

const barCodeInput:any = ref(null);
onMounted(() => {
  let dom = tableL.value as any;
  let height = dom.clientHeight - 50;
  tbHeight.value = height;
  barCodeInput.value.focus()
})
import { Books } from './components/types';

let showBox = ref(false);
let tables = reactive<any>([]);
let tbHeight = ref(0)
let tableL = ref(null);
const barCode = ref<string>("");



const showDialog = ref(false);

let boxArr = reactive<any>([]);

const closeBoxFinish = () => {
  showBox.value = false;
  tables = reactive<any>([]);
  boxArr = reactive<any>([]);
  barCode.value = '';
}

// 选中，表示可以扫描
const handleFocus = () => {

}

// 接收扫描仪的数据
const handleEnter = () => {
  if (barCode.value) {
    let codeM = barCode.value;
    barCode.value = '';
    // 查询barcode是否在tables中
    if (tables.find((el: any) => el.code === codeM)) {
      ElMessage.warning('code已存在');
    } else {
      getBookInfoByCode(codeM).then((res: any) => {
        if (res.code === 200) {
          if(tables[0]&&res.data.name!==tables[0].bookName){
            return ElMessage.error('入库只能同一类书')
          }
          let miji = '一般'
          if (res.data.classification === '10') {
              miji = '内部'
            } else if (res.data.classification === '20') {
              miji = '秘密'
            } else if (res.data.classification === '30') {
              miji = '绝密'
            }else if (res.data.classification === '40') {
              miji = '机密'
            }
          // 查询成功
          tables.push({
            code: codeM,
            bookName: res.data.name,
            publishTime: res.data.publicationTime,
            miji,
            inCount: 1,
            bookId: res.data.bookId,
            orgName: res.data.name
          })
        } else {
          ElMessage.error('code不存在')
        }
      })
      // push新code


    }
  } else {
    // 没有barcode

  }
}

// 删除row
const deleteRow = (row: Books) => {
  ElMessageBox.alert('确定删除？', '提示', {
    confirmButtonText: 'OK',
    callback: () => {
      const index = tables.findIndex((el: any) => el.code === row.code)
      if (index !== -1) {
        tables.splice(index, 1);
        ElMessage({
          type: 'success',
          message: `删除成功`,
        })
      }
    },
  })
}

// 入库
const inPack = () => {
  if (tables.length) {
    showDialog.value = true;
  } else {
    ElMessage.warning('请先扫描书籍')
  }
}

// 关闭入库
const closeRuKu = () => {
  showDialog.value = false;
}

// 确定入库，显示柜打开弹窗
const showOpenBox = (boxs: any[]) => {
  showDialog.value = false;
  const boxInfos = boxs.reduce((prev: any, cur: any) => {
    if (prev[cur.cabinetId]) {
      prev[cur.cabinetId].push(cur)
    } else {
      prev[cur.cabinetId] = [cur]
    }
    return prev
  }, {})
  // 所有存放柜子集合
  boxArr = [];
  for (let key in boxInfos) {
    boxArr.push({
      // 柜子id
      cabinetId: key,
      // 柜子名TODO格式化
      cabinetName: boxInfos[key][0].cabinetName,
      // 每个柜子的详细放置位置
      boxs: boxInfos[key],
      orgName: boxInfos[key][0].orgName
    })
  }
  setTimeout(() => {
    showBox.value = true;
  }, 0);
}
</script>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.toptitlemain {
  width: 100%;
  height: calc(92vh);
  padding: 1vw;
  box-sizing: border-box;

  .out-input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1vw;

    span {
      display: inline-block;
      color: #fff;
      margin-right: 10px;
    }
  }

  .table-list {
    width: 100%;
    height: 75vh;
    padding-top: 4vh;
    box-sizing: border-box;
    position: relative;

    // TODO table背景渐变色
    .in-pack {
      position: absolute;
      top: -1vh;
      right: 1vh;
    }
  }

  .footer {
    position: fixed;
    right: 5vw;
    bottom: 6vh;
  }
}
</style>
